<!DOCTYPE html>
<html>
	<head>
		<title>CSS Regions: named flow content has a child with contentEditable attribute set</title>
		<link rel="author" title="Mihai Balan" href="mailto:mibalan@adobe.com">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-into-property">
		<link rel="help" href="http://www.w3.org/TR/css3-regions/#the-flow-from-property">
		<link rel="help" href="http://www.w3.org/TR/html5/editing.html#contenteditable">
		<meta name="flags" content="dom interact">
		<meta name="assert" content="Test checks that setting the contentEditable attribute on
		elements that get flowed in a region does not affect their rendering in the regions. Also,
		such elements should be editable just as they are outside of the region, even if they are
		not the only elements in the named flow.">
		<link rel="match" href="reference/contentEditable-002-ref.html">
		<link rel="stylesheet" href="support/common.css">
		<style>
		.content {
			flow-into: flow;
			font-family: Times, serif;
			font-size: 20px;
			line-height: 1em;
		}
		.region {
			flow-from: flow;
			width: 300px;
			height: 300px;
			border: 2px solid black;
		}
		.region p {
			width: 100%;
			height: 50%;
			background-color: red;
		}
		</style>
	</head>
	<body>
		<ol>
			<li>Below you should see a square with a black border with some text inside it. No red
				should be visible at any time during this test.</li>
			<li>Click between the two gray markers and type &ldquo;<strong>foobar bazquux</strong>&rdquo;
				<ul>
					<li>No (new) text should appear between the gray markers</li>
				</ul>
			</li>
			<li>Click between the two colored markers (green and blue) and type &ldquo;<strong>foobar
				bazquux</strong>&rdquo;
				<ul>
					<li>The text you typed is displayed at the cursor position between the
				two markers and the lines of text wrap inside the black border</li>
				</ul>
			</li>
		</ol>
		<div class="content">This is some text that must not be editable. Not even the text between
			<em><span class="inline-marker gray"></span> <span id="marked-inactive">these two markers</span>
				<span class="inline-marker gray"></span>.</em>
			<div contentEditable="true">
				However, this text <em><span class="inline-marker green"></span> <span id="marked-active">
				between these colored markers</span> <span class="inline-marker blue"></span></em>
				should be editable.
			</div>
			And another non-editable text.
		</div>
		<div class="region">
			<p>&nbsp;</p>
		</div>
		<script type="text/javascript" src="support/helpers.js"></script>
		<script type="text/javascript">
		insertText("#marked-inactive", "foobar bazquux");
		insertText("#marked-active", "foobar bazquux");
		</script>
	</body>
</html>